const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')
const isProduction = precess.env.NODE_ENV === 'production';
module.exports = {
    mode: isProduction ? 'production' : 'development',
    entry: './src/index.tsx',
    output: {
        path: path.join(__dirname, 'dist'), //打包后的输出目录
        filename: 'main.js' //打包后的JS文件名
    },
    devtool: 'source-map', //生成单独的完整的source-map文index.html件，方便调整
    devServer: {
        port: 8080, //开发服务器的端口
        hot: true, //启动热更新
        contentBase: path.join(__dirname, 'public'), //静态文件根目录
        historyAPIFallback: { //因为我们可能会使用浏览器路由，刷新的时候需要重定向到根文件
            index: './index.html'
        }
    },
    resolve: {
        alias: { //配置解析的别名，方便我们编写引入的路径
            '@': path.resolve(__dirname, 'src'),
            '~': path.resolve(__dirname, 'node_modules')
        }, //当你加载一个文件的时候,没有指定扩展名的时候，会自动寻找哪些扩展名
        extends: ['.ts', '.tsx', '.js', 'jsx', 'json']
    },
    module: {
        rules: [{
                test: /\.(j|t)sx?$/,
                loader: 'babel-loader', //ts-loader性能比较差
                options: {
                    presets: [
                        "@babel/preset-env", //解析ES+
                        "@babel/preset-react", //解析React JSX语法的
                        "@babel/preset-typescript" //解析typesript
                    ],
                    Plugins: [ //babel-plugin-import 可以实现按需加载的babel插件 
                        //默认引less,我们引css
                        ['import', { libraryName: 'antd', style: 'css' }]
                    ]
                },
                include: path.resolve('src'),
                exclude: /node_modules/
            },
            { // 引入antdesign中用的css
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: 'css-loader'
                    }
                ]
            },
            { //我们自己的代码都是less
                test: /\.less$/,
                use: [
                    "style-loader",
                    {
                        loader: 'css-loader',
                        options: { importLoaders: 3 } //import的文件导入之前需要经过几个loader的处理
                    },
                    {
                        loader: 'postcss-loader', //加入厂商的兼容性前缀
                        options: {
                            postcssOptions: {
                                Plugins: ['autoprefixer']
                            }
                        }
                    },
                    {
                        loader: 'px2rem-loader', //可以把px单位变成rem单位
                        options: {
                            remdnit: 75, //1rem对应75px
                            remPrecesion: 8 //计算后的小数精度是8位
                        }
                    },
                    "less-loader" //把less编译成css
                ]
            },
            {
                test: /\.(jpg|png|gif|svg|jpeg)/,
                type: 'asset' //以前url-loader或者file-loader,现在不需要
            }
        ]
    },
    Plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}